<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-photo__photo">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                <el-form-item>
                    <el-input v-model="dataForm.name" :placeholder="$t('photoinfo.name')" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select
                            v-model="selectPhotoLabel"
                            multiple
                            filterable
                            remote
                            :placeholder="$t('photoinfo.labelName')"
                            :remote-method="getphotoLabel"
                            :loading="labelNameLoading">
                        <el-option
                                v-for="item in this.photoLabel"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getDataList()">{{ $t('query') }}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="$hasPermission('photo:info:save')" type="primary" @click="addOrUpdateHandle()">{{
                        $t('add') }}
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="$hasPermission('photo:info:delete')" type="danger" @click="deleteHandle()">{{
                        $t('deleteBatch') }}
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table
                    v-loading="dataListLoading"
                    :data="dataList"
                    border
                    @selection-change="dataListSelectionChangeHandle"
                    @sort-change="dataListSortChangeHandle"
                    style="width: 100%;">
                <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                <el-table-column :label="$t('photoinfo.images')" header-align="center" align="center" width="150">
                    <template slot-scope="scope" >
                        <el-image :src="scope.row.downloadUrl"
                                  fit="cover"
                                  :preview-src-list="evaluatePictureList"
                                  @click="clickevaluatePicture(scope.row)"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" :label="$t('photoinfo.name')"
                                 header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="photoLabelNames" :label="$t('photoinfo.labelName')"
                                 header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="size" :label="$t('photoinfo.size')"
                                 header-align="center" align="center"
                ></el-table-column>
                <el-table-column prop="createDate" :label="$t('photoinfo.createDate')"
                                 sortable="custom" header-align="center"
                                 align="center" width="180"></el-table-column>
                <el-table-column prop="createUser" :label="$t('photoinfo.createUser')"
                                 header-align="center" align="center"
                ></el-table-column>

                <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button v-if="$hasPermission('photo:info:delete')" type="text" size="small"
                                   @click="deleteHandle(scope.row.id)">{{ $t('delete') }}
                        </el-button>
                        <el-button v-if="$hasPermission('photo:info:delete')" type="text" size="small"
                                   @click="updateLabelName(scope.row.id)">{{ $t('photoinfo.updateLabelName') }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="limit"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="pageSizeChangeHandle"
                    @current-change="pageCurrentChangeHandle">
            </el-pagination>
            <!-- 弹窗, 新增 / 修改 -->
            <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
            <update-label ref="updateLabel" @refreshDataList="getDataList"></update-label>
        </div>
    </el-card>
</template>

<script>
    import mixinViewModule from '@/mixins/view-module'
    import AddOrUpdate from './info-add-or-update'
    import UpdateLabel from './info-update-label'

    export default {
        mixins: [mixinViewModule],
        data() {
            return {
                mixinViewModuleOptions: {
                    getDataListURL: '/photo/info/page',
                    getDataListIsPage: true,
                    deleteURL: '/photo/info',
                    deleteIsBatch: true
                },
                dataForm: {
                    name: '',
                    labelIds: '',
                },
                evaluatePictureList: [],
                photoLabel: [],
                selectPhotoLabel: [],
                labelNameLoading:false
            }
        },
        mounted(){
            // 初始化标签名称下拉框
            this.getphotoLabel('')
        },
        watch:{
            selectPhotoLabel:function (newData) {
                this.dataForm.labelIds=newData.join(',')
            }
        },
        methods: {
            // 预览照片
            clickevaluatePicture(row) {
                let srclist = []
                srclist.push(row.downloadUrl)
                this.evaluatePictureList = srclist
            },
            // 修改标签名称
            updateLabelName(infoId) {
                this.$refs.updateLabel.showPhtotLabelByInfoId(infoId)
            },
            getphotoLabel(query) {
                this.loading = true
                this.$http.get('/photo/label/select-options?query=' + query).then(({data: res}) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.loading = false
                    this.photoLabel = res.data.labelSelectOptions
                }).catch(() => {
                })
            }
        },
        components: {
            AddOrUpdate, UpdateLabel
        }
    }
</script>
